import React from "react";
import { Modal, Switch, Button } from "antd";
import { renderTypeMap } from "./CreateForm";
import styles from "./index.less";

const Line = (props) => {
  const { label, value } = props;

  return (
      <div className={styles.row}>
        <span className={styles.key}>{label}</span>
        <span className={styles.word}>{value}</span>
      </div>
  );
};

class Detail extends React.Component {
  handleCancel = () => {
    const { handleDetailVisible } = this.props;
    handleDetailVisible(false, "");
  };

  render() {
    const { visible, data = {}, title = "" } = this.props;
    const record = data || {};
    const status = (
        <Switch
            defaultChecked
            checked={Boolean(Number(record.status))}
            size="small"
            disabled
        />
    );

    return (
        <Modal
            title={title}
            visible={visible}
            width="582px"
            centered
            onCancel={this.handleCancel}
            footer={[
              <Button key="back" onClick={this.handleCancel}>
                关闭
              </Button>,
            ]}
        >
          <div className={styles.root}>
            <Line label="所属用户：" value={(record.createBy||'')+'('+record.userId+')' }/>

            <Line label="模板类型：" value={renderTypeMap[record.type] || ''} />

            <Line label="审批意见内容：" value={record.content} />

            <Line label="流程名称：" value={record.flowName} />

            <Line label="启用状态：" value={status} />

          </div>
        </Modal>
    );
  }
}

export default Detail;
